import { useEffect, useState } from "react";
import styles from "./index.module.less";
import { Button, Flex, Space } from "antd";
import cs from "classnames";
import { useRequest } from "ahooks";
import { getLogisticsCompanyAndIconList } from "@/api/modules/transactionManagement";

export default (props: any) => {
	const [selectValue, setSelectValue] = useState(props.value);

	useEffect(() => {
		setSelectValue(props.value);
	}, [props.value]);

	const handleChange = item => {
		props?.onChange(item);
	};

	return (
		<Space size={20} wrap>
			{props?.list?.map((item, index) => {
				const isChecked = selectValue?.delivery_id === item?.delivery_id;
				return (
					<Button
						className={cs({
							[styles.btn]: true,
							[styles.btn_active]: selectValue === index
						})}
						type={isChecked ? "primary" : "default"}
						ghost={isChecked}
						onClick={() => handleChange(item)}
					>
						<Flex align="center">
							<img src={item?.icon_url} width={24} />
							<span style={{ marginLeft: "4px" }}>{item?.delivery_name}</span>
						</Flex>
					</Button>
				);
			})}
		</Space>
	);
};
